<template>
  <SignLayout>
    <template #toolbar>
      <h2>签署方</h2>
      <ul>
        <li v-for="signer in signers" :key="signer.id" @mousedown="handleSignerMouseDown(signer, $event)">
          {{ signer.name }}
        </li>
      </ul>
      <p>所有签署方都已分配: {{ allSignersAssigned }}</p>
    </template>
    <template #viewer>
      <SignInteractor
        ref="interactor"
        :signs="signs"
        @delete="handleDelete"
        @update:position="handleUpdatePosition"
      >
        <IframeViewer
          :file-url="pdfFile"
          @rendered="onPdfRendered"
        />
      </SignInteractor>
    </template>
  </SignLayout>
</template>

<script setup>
import { ref, computed } from 'vue';
import { storeToRefs } from 'pinia';
import SignLayout from '@/components/SignWorkflow/SignLayout.vue';
import SignInteractor from '@/components/SignWorkflow/SignInteractor.vue';
import SignDraggable from '@/components/SignWorkflow/children/SignDraggable.vue';
import IframeViewer from '@/components/signPosition/iframe-viewer.vue';
import { useDrag } from '@/components/SignWorkflow/hooks/useDrag';
import { isPositionValid, areAllSignersAssigned } from '@/components/SignWorkflow/SignValidator.js';
import { useSignStore } from '@/store/sign';

/**
 * @description 签署流程主视图，组装所有签署位相关组件
 */

const signStore = useSignStore();
const { signs, signSubjects: signers } = storeToRefs(signStore);

const pdfFile = ref(`${import.meta.env.BASE_URL}sample-pdfs/test.pdf`); // 临时的PDF文件

const draggedSigner = ref(null);
const interactor = ref(null);

const { onMouseDown } = useDrag({
  onDragEnd: ({ x, y }) => {
    if (draggedSigner.value && interactor.value) {
      const rect = interactor.value.interactionLayer.getBoundingClientRect();
      const newSign = {
        id: Date.now(),
        name: draggedSigner.value.name,
        signerId: draggedSigner.value.id,
        x: x - rect.left,
        y: y - rect.top,
        width: 100, // 临时宽度
        height: 50, // 临时高度
      };

      if (isPositionValid(newSign, pdfPage.value)) {
        signStore.addSign(newSign);
      } else {
        alert('签章位置无效');
      }
      draggedSigner.value = null;
    }
  },
});

function handleSignerMouseDown(signer, event) {
  draggedSigner.value = signer;
  onMouseDown(event);
}

function handleUpdatePosition({ id, x, y, width, height }) {
  const sign = signs.value.find(s => s.id === id);
  if (sign) {
    const newPosition = { ...sign, x, y, width, height };
    if (isPositionValid(newPosition, pdfPage.value)) {
      signStore.updateSign({ id, x, y });
    } else {
      alert('签章位置无效');
    }
  }
}

function handleDelete(id) {
  signStore.deleteSign(id);
  console.log(`删除签章: ${id}`);
}

const pdfPage = ref(null);

function onPdfRendered(data) {
  console.log('PDF 渲染完成:', data);
  pdfPage.value = { width: data.width, height: data.height };
}

const allSignersAssigned = computed(() => {
  return areAllSignersAssigned(signers.value, signs.value);
});
</script>

<style scoped>
/* 视图特定样式 */
</style>